<template>
  <div class="movieListRoot">
    <FontHeader style="background: #192332; position: relative;"></FontHeader>
    <div class="movieListContainer">
      <div class="movieListWrap">
        <div class="content_right" style="margin-left: 120px">
          <ul>
            <li v-for="(item,i) in movies" :key="item.movieId">
              <router-link :to="{path:'/detail',query:{movieId:item.movieId}}">
                <img :src="'http://43.138.158.143/posters/'+item.movieId+'.jpg'" class="content_left" style="width: 124px">
              </router-link>
              <div class="li_content_right">
                <router-link :to="{path:'/detail',query:{movieId:item.movieId}}" class="name">
                  {{item.movieName}}({{item.movieReleasedYear}})
                </router-link>
                <div class="rating">
                  <i>{{item.movieAvgRating}}</i>
                </div>
                <div>
                  <span v-for="genre in splitGenres(i)">
                    <el-tag style="margin-left: 2px;cursor: pointer" @click="searchGenre(genre)">{{genre}}</el-tag>
                  </span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div style="clear: both"></div>
      </div>
      <div style="margin: 0 auto;width: 600px">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.pageNum-0"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="this.pageSize-0"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>

</template>

<script>
import FontHeader from "@/components/FontHeader";

export default {
  components: {FontHeader},
  name: "MovieList",
  props:{

  },
  data(){
    return{
      page: this.$route.query.page,
      pageSize: this.$route.query.pageSize,
      pageNum: 1,
      searchType: this.$route.query.searchType,
      info: this.$route.query.info,
      total: 0,
      movies:{},
    }
  },
  created() {
    this.search(this.page,this.pageSize)
  },
  methods:{
    search(page,pageSize){
      this.request.get('/movie/visitor/searchMovieByAny',{
          params:{
            page: page-0,
            pageSize: pageSize-0,
            searchType: this.searchType,
            info: this.info
          }
        }).then(res=>{
          if(res.code == 0){
            this.movies = res.data.movieList
            this.total = res.data.movieNum
          }else{
            this.$message.error(res.message)
          }
        })
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize-0
      this.search(this.page-0,this.pageSize)

    },
    handleCurrentChange(pageNum){
      this.pageNum = pageNum-0
      this.search(this.pageNum,this.pageSize-0)
    },
    splitGenres(i){
      if (this.movies[i].movieGenres!==undefined){
        return this.movies[i].movieGenres.split('|')
      }
    },
    searchGenre(genre){
      this.$router.push({
        name:'MovieList',
        query:{
          page: 1,
          pageSize: 5,
          searchType: 1,
          info: genre
        }
      })
    }
  },//监听地址的变化
  watch:{
    $route(){
      if(this.$route.query){
        this.page = this.$route.query.page
        this.pageSize = this.$route.query.pageSize
        this.searchType = this.$route.query.searchType
        this.info =  this.$route.query.info
        this.search(this.page,this.pageSize)
      }
    }
  }
}
</script>

<style scoped>

</style>